<template>
  <div class="already-send">
    <head-top head-title="已送票" goBack="true"></head-top>
    <div class="areas-name border-bottom">
      <div class="name">
        <span>小区名称：{{$route.params.name}}</span>
      </div>
      <div class="count">
        <span>已送票总数(<span style="color: #0078de; font-size: 14px">{{sendList.length}}票</span>)</span>
      </div>
    </div>
    <div class="already">
      <div class="vote-wrapper">
        <ul class="toupiao-wrapper" ref="yitoupiao">
          <li class="tou-wrapper border-bottom-last" v-for="(item,index) in sendList" :key="index">
            <div class="left">{{item.areasName}}</div>
            <div class="right">
              <div class="yi-color">已送票</div>
              <input class="yi-input"  type="checkbox" checked disabled name="id" :value="item.id" :id="item.id">
              <label :for="item.id"></label>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import headTop from '../header/Header.vue'
import {lookSendVote} from '../../api/toupiaotongji.js'
export default {
  name: 'AlreadySendVote',
  data() {
    return {
      areasName: '',
      sendList: []
    }
  },
  components: {
    headTop
  },
  created() {
    this._lookSendVote()
  },
  methods: {
    _lookSendVote() {
      lookSendVote(this.$route.params.vid).then(res => {
        if (res.code === 200) {
          this.sendList = res.data
          this.sendList.forEach(item => {
            this.$set(item, 'areasName', `${item.yuan}${item.zhuang}幢${item.util}单元${item.fanghao}室`)
          })
        }
      })
    }
  }
}
</script>

<style lang="scss">
  .already-send {
    padding-top: 40px;
    .areas-name {
      width: 100%;
      position: fixed;
      top: 40px;
      left: 0;
      display: flex;
      padding: 0px 10px;
      box-sizing: border-box;
      height: 35px;
      line-height: 35px;
      color: #666;
      z-index: 2;
      background-color: #fff;
      .name {
        flex: 1;
        font-size: 13px;
      }
      .count {
        flex: 1;
        text-align: right;
      }
    }
    .already{
      .vote-wrapper {
        margin-top: 35px;
        .toupiao-wrapper{
          -webkit-overflow-scrolling: touch;
          .tou-wrapper{
            margin:0 10px;
            height: 44px;
            line-height: 44px;
            .left{
              font-size: 13px;
              display: inline;
              text-align: left;
            }
            .right{
              font-size: 13px;
              text-align: right;
              position: relative;
              top: -42px;
              height: 44px;
              input[type='checkbox'] {display: none}
              label { position: absolute; right: -8px; top: 12px;}
              label:before { content: ''; position: absolute; left: -30px; top: 0; width: 16px; height: 16px; border: 1px solid #ddd; border-radius: 50%; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; }
              label:after { content: ''; position: absolute; left: -23px; top: 3px; width: 4px; height: 10px; border: 0; border-right: 1px solid #fff; border-bottom: 1px solid #fff; background: #fff; transform: rotate(45deg); transition: all 0.3s ease;}
              input[type='checkbox']:checked + label:before { background: #0087de; border-color: #0087de; }
              input[type='checkbox']:checked + label:after { background: #0087de; }
              .yi-color{
                color: #000 !important;
                margin-right: 25px;
              }
            }
          }
        }
      }
    }
  }
</style>

